<template>
	<view class="item-index-list" :style="{paddingTop:marginTopStyle+'rpx'}">
		<view class="item-index-box" v-for="item,index in dataList"  @tap="navToDetail(item.DATAKEY,item.PROJ_ID,item.PROJ_STAGE,0)" :key="index">
			<view class="item-index-top">
				<view class="item-top-text">{{item.NAME}}</view>
			</view>
			<view class="item-index-bot">
				<view class="item-main-top">
					<view class="main-setion-top">
						<view class="setion-left">
							<view class="setion-text-top">{{item.projState}}</view>
							<view class="setion-text-bot">
								<view class="tag-box" v-if="item.industry">{{item.industry}}</view>
								<view class="tag-box" v-if="item.COMPANY_SIZE">{{item.COMPANY_SIZE}}</view>
							</view>
						</view>
						<view class="setion-right">
							<view class="right-box topsty" v-if="tabChecked==0" @click.stop="navToPage(1,item.DATAKEY,item.PROJ_ID,item.NAME)">
								<image src="../../../static/images/icon_report.png" mode=""></image>
								<view class="text-sty">报送信息</view>
							</view>
							<view class="right-box botsty" @click.stop="navToPage(2,item.DATAKEY,item.PROJ_ID,item.NAME)">
								<image src="../../../static/images/icon_Instructions.png" mode=""></image>	
								<view class="text-sty">批示信息</view>
								<view v-if="item.MESSAGEREADED==1"  class="red-point"></view>
							</view>
						</view>
					</view>
					<view class="setion-bottom">
						<view class="right-text"></view>
						<view class="right-box botsty" @click.stop="navToUpdate(item.DATAKEY,item.PROJ_ID,item.NAME)">
							<image src="../../../static/images/icon_Instructions.png" mode=""></image>	
							<view class="text-sty">更新内容</view>
							<view v-if="item.MESSAGEREADED==1"  class="red-point"></view>
						</view>
					</view>
					<view class="main-setion-bot">
						<view class="setion-item">
							<view class="setion-item-top">{{item.STAGE1_ENDDATE || ''}}</view>
							<image  v-if='item.PROJ_STAGE==1' src="../../../static/images/progress_02.png" mode=""></image>
							<image v-else-if='item.PROJ_STAGE>1' src="../../../static/images/progress_01.png" mode=""></image>
							<image v-else src="../../../static/images/progress_03.png" mode=""></image>
							<view class="setion-item-bot">项目入库</view>
							<view :class="item.PROJ_STAGE>1 ?'point':'gray-point'"></view>
						</view>
						<view class="setion-item">
							<view class="setion-item-top">{{item.STAGE2_ENDDATE || ''}}</view>
							<image  v-if='item.PROJ_STAGE==2' src="../../../static/images/progress_02.png" mode=""></image>
							<image v-else-if='item.PROJ_STAGE>2' src="../../../static/images/progress_01.png" mode=""></image>
							<image v-else src="../../../static/images/progress_03.png" mode=""></image>
							<view class="setion-item-bot">项目评估</view>
							<view :class="item.PROJ_STAGE>2 ?'point':'gray-point'"></view>
						</view>
						<view class="setion-item">
							<view class="setion-item-top">{{item.STAGE3_ENDDATE || ''}}</view>
							<image  v-if='item.PROJ_STAGE==3' src="../../../static/images/progress_02.png" mode=""></image>
							<image v-else-if='item.PROJ_STAGE>3' src="../../../static/images/progress_01.png" mode=""></image>
							<image v-else src="../../../static/images/progress_03.png" mode=""></image>
							<view class="setion-item-bot">项目核查</view>
						</view>
						<view class="setion-item">
							<view class="setion-item-top">{{item.STAGE4_ENDDATE || ''}}</view>
							<image  v-if='item.PROJ_STAGE==4' src="../../../static/images/progress_02.png" mode=""></image>
							<image v-else-if='item.PROJ_STAGE>4' src="../../../static/images/progress_01.png" mode=""></image>
							<image v-else src="../../../static/images/progress_03.png" mode=""></image>
							<view class="setion-item-bot">再评估</view>
							<view :class="item.PROJ_STAGE>4 ?'point':'gray-point'"></view>
						</view>
						<view class="setion-item">
							<view class="setion-item-top">{{item.STAGE5_ENDDATE || ''}}</view>
							<image  v-if='item.PROJ_STAGE==5' src="../../../static/images/progress_02.png" mode=""></image>
							<image v-else-if='item.PROJ_STAGE>5' src="../../../static/images/progress_01.png" mode=""></image>
							<image v-else src="../../../static/images/progress_03.png" mode=""></image>
							<view class="setion-item-bot">商务谈判</view>
							<view :class="item.PROJ_STAGE>5 ?'point':'gray-point'"></view>
						</view>
						<view class="setion-item">
							<view class="setion-item-top">{{item.STAGE6_ENDDATE || ''}}</view>
							<image  v-if='item.PROJ_STAGE==6' src="../../../static/images/progress_02.png" mode=""></image>
							<image v-else-if='item.PROJ_STAGE>6' src="../../../static/images/progress_01.png" mode=""></image>
							<image v-else src="../../../static/images/progress_03.png" mode=""></image>
							<view class="setion-item-bot">合同签署</view>
						</view>
					</view>
				</view>
				<view class="item-main-bot">
					<view class="main-bot-title">
						<view class="title-left">{{numTotype(item.REPORTTYPE)}}</view>
						<view class="title-right">{{item.UPDATE_TIME}}</view>
					</view>
					<!-- <view class="main-bot-content">
						<view class="content-title">项目入库-》项目信息:</view>
						<view class="content-mid">1、项目核心诉求：土地要求面积变化，项目厂房面积要求变化</view>
						<view class="show-more">展开</view>
					</view> -->
				</view>
			</view>
			<view class="chkbox" @click.stop="handleChangeChkBox(index,item.PROJ_ID,item.DATAKEY,item.NAME)" v-if="showCheckBox">
				<view class="inner" v-if="item.checked"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
		    return{
				list:'123123123123',
				industyData:{},
				checkOne:false,
			}
		},
		props: {
			dataList: {
				type: Array,
				default(){
					return []
				}
			},
			dicData:{
				type:Object,
				default:{}
			},
			showCheckBox: {
				type: Boolean,
				default: false
			},
			marginTopStyle:{
				type:Number
			},
			tabChecked:{
				type:Number
			}
		},
		watch:{
			dicData(){
				this.industyData = JSON.parse(this.dicData['busProjStage'])
			},
		},
		methods: {
			numTotype(num){
				if(num==1){
					return '本周新增'
				}else{
					return '本周有进展'
				}
			},
			// 路由跳转
			navToPage(num,dataKey,projId,name) {

			
				if(this.tabChecked===0){
					if(num===1){
						uni.navigateTo({
							url: `/pages/submitReport/detail?dataKey=${dataKey}&projId=${projId}`
						})
					}else{
						uni.navigateTo({
							url: `/pages/readInformation/readInformation?dataKey=${dataKey}&projId=${projId}&projectName=${name}`
						})
					}
				}else{
					if(num===1){
						uni.navigateTo({
							url: `/pages/submitReport/detail?dataKey=${dataKey}&projId=${projId}`
						})
					}else{
						uni.navigateTo({
							url: `/pages/readInformation/readInformation?dataKey=${dataKey}&projId=${dataKey}&projectName=${name}`
						})
					}
				}
			},
			navToUpdate(dataKey,projId,name){
				uni.navigateTo({
					url: `/pages/updateContent/updateContent?dataKey=${dataKey}&projId=${projId}&projectName=${name}`
				})
				
			},
			navToDetail(code,projid,project,num){
				let url=''
				if(this.tabChecked===0){
					url=`/pages/index/detail/detail?code=${projid}&project=${project}&num=${num}`
				}else{
					url=`/pages/index/detail/detail?code=${code}&project=${project}&num=${num}`
				}
				console.log()
				this.$emit('changeStatus')
				uni.navigateTo({
					url: url
				})
			},
			handleChangeChkBox(num,key,datakey,name) {
				this.$emit('getPro',{num:num,key:key,datakey:datakey,name:name})
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-index-list{
		padding-top: 80rpx;
	}
	.item-index-box{
		margin: 20rpx 30rpx  0rpx 30rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 22rpx;
		position: relative;
		.item-index-top{
			// width: 650rpx;
			height: 40rpx;
			// margin: 20rpx 20rpx 18rpx 20rpx;
			background-color: #0099cc;
			border-radius: 10rpx;
			.item-top-text{
				font-family: AlibabaPuHuiTi-Regular;
				padding-left: 20rpx;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 40rpx;
				letter-spacing: 0px;
				color: #ffffff;
			}
		}
		.item-index-bot{
			margin-top: 15rpx;
			.item-main-top{
				.main-setion-top{
					display: flex;
					justify-content: space-between;
					.setion-left{
						display: flex;
						flex-direction: column;
						.setion-text-top{
								width: 116rpx;
								height: 30rpx;
								padding: 0 8rpx;
								background-color: #00ac0c;
								border-radius: 4rpx;
								font-family: AlibabaPuHuiTi-Regular;
								text-align: center;
								font-size: 24rpx;
								line-height: 30rpx;
								letter-spacing: 0px;
								color: #ffffff;
						}
						.setion-text-bot{
							display: flex;
							margin-top: 18rpx;
							.tag-box{
								height: 30rpx;
								padding: 0 8rpx;
								background-color: #e6e6e6;
								margin-right: 9rpx;
								border-radius: 4rpx;
								font-family: AlibabaPuHuiTi-Regular;
								text-align: center;
								font-size: 24rpx;
								line-height: 30rpx;
								letter-spacing: 0px;
								color: #999999;
								max-width: 200rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space:nowrap;
							}
						}
					}
					.setion-right{
						.right-box{
							width: 140rpx;
							height: 36rpx;
							border-radius: 6rpx;
							display: flex;
							align-items: center;
							position: relative;
							.red-point{
								position: absolute;
								top: -10rpx;
								right: -6rpx;
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								background-color: red;
							}
							.text-sty{
								line-height: 36rpx;
								font-family: AlibabaPuHuiTi-Regular;
								font-size: 24rpx;
								color: #ffffff;
							}
							image{
								width: 20rpx;
								height: 25rpx;
								margin: 0 7rpx;
							}
						}
						.topsty{
							background-color: #f39025;
						}
						.botsty{
							margin-top: 10rpx;
							background-color: #00c60e;
						}
					}
				}
				.setion-bottom{
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					.right-text-top {
						width: 120rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						background-color: #00ac0c;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-weight: normal;
						color: #FFFFFF;
					}
					.right-box{
						width: 140rpx;
						height: 36rpx;
						border-radius: 6rpx;
						display: flex;
						align-items: center;
						position: relative;
						.red-point{
							position: absolute;
							top: -10rpx;
							right: -6rpx;
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background-color: red;
						}
						.text-sty{
							line-height: 36rpx;
							font-family: AlibabaPuHuiTi-Regular;
							font-size: 24rpx;
							color: #ffffff;
						}
						image{
							width: 20rpx;
							height: 25rpx;
							margin: 0 7rpx;
						}
					}
					.botsty{
						// margin-top: 10rpx;
						background-color: #4399FC;
					}
					.botstytwo{
						background-color: #0099cc;
					}
				}
				.main-setion-bot{
					margin-top: 23rpx;
					width: 630rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					border-bottom: 3rpx solid #e8f0f2;
					padding: 0 78rpx 10rpx 78rpx;
					.setion-item{
						width: 158rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 10rpx;
						position: relative;
						.setion-item-top{
							font-family: AlibabaPuHuiTi-Regular;
							height: 36rpx;
							font-size: 24rpx;
							color: #4d4d4d;
						}
						image{
							width: 82rpx;
							height: 22rpx;
						}
						.setion-item-bot{
							font-family: AlibabaPuHuiTi-Regular;
							font-size: 24rpx;
							color: #4d4d4d;
						}
						.point{
							width: 8rpx;
							height: 8rpx;
							border-radius: 4rpx;
							background-color: #0392f2;
							position: absolute;
							right: 0;
							top: 42rpx;
						}
						.gray-point{
							width: 8rpx;
							height: 8rpx;
							border-radius: 4rpx;
							position: absolute;
							right: 0;
							top: 42rpx;
							background-color: #999999;
						}
					}
				}
			}
			.item-main-bot{
				margin: 0 10rpx;
				.main-bot-title{
					height: 66rpx;
					display: flex;
					justify-content: space-between;
					.title-left{
						line-height: 66rpx;
						font-family: AlibabaPuHuiTi-Regular;
						font-size: 24rpx;
						color: #414a5d;
					}
					.title-right{
						line-height: 66rpx;
						font-family: AlibabaPuHuiTi-Regular;
						font-size: 24rpx;
						color: #999999;
					}
				}
				.main-bot-content{
					position: relative;
					.content-title,.content-mid{
						font-size: 24rpx;
						line-height: 34rpx;
						font-weight: normal;
						color: #999999;
					}
					.show-more{
						width: 60rpx;
						height: 34rpx;
						position: absolute;
						bottom: 0;
						right: 0;
						font-size: 24rpx;
						font-weight: normal;
						
						letter-spacing: 0px;
						color: #0099cc;
					}
				}
			}
		}
	}
	
	.chkbox {
		width: 40rpx;
		height: 40rpx;
		border: solid 3px #0099cc;
		position: absolute;
		left: 10rpx;
		bottom: 10rpx;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.inner {
			width: 22rpx;
			height: 22rpx;
			border-radius: 4px;
			background-color: #0089b6;
		}
	}
</style>
